<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <script>
    // 登录页面
    async function handleLogin(){
      // 发请求, 在页面当中通过await保证,请求回来数据后才执行后续代码
      await userLogin()
      console.log('跳转到首页');
    }
    // vuex的user模块
    async function userLogin(){
      const token = await login()
      console.log('输出token', token);
    }
    // api的user文件
    function login(data){
      return request({
        method: 'post',
        url: '/sys/login',
        data
      })
    }
    // axios的request文件
    function request(){
      return new Promise((resolve,reject) => {
        // 异步代码
        setTimeout(() => {
          resolve(interceptorsResponse())
        }, 500)
      })
    }
    // request的响应拦截器
    function interceptorsResponse(response){
      // 成功
      // return '123456'

      // 失败
      // console.log('产生了错误, 提示用户');

      // 产生一个错误
      // 方式1 - reject(放弃,没有reject传进来)
      // 方式2 - throw new Error()
      // 在响应拦截器中,通过主动产生一个Error错误,阻止页面跳转到首页(类似于错误冒泡)
      // throw new Error('产生一个错误')

      try {
        // 模拟登录接口中出现错误, 在catch中抛出异常来阻止跳转到首页
        JSON.parse('asbbs')
      } catch (error) {
        console.log(error);
        throw new Error('产生一个错误')
      }
    }
    handleLogin()
  </script>
</body>
</html>
